<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多边形密铺探究</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            display: flex;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow: hidden;
        }

        .control-panel {
            width: 300px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            overflow-y: auto;
            max-height: 100vh;
        }

        .main-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .canvas-container {
            flex: 1;
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            margin: 20px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .info-panel {
            width: 260px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            overflow-y: auto;
            max-height: 100vh;
        }

        .title {
            font-size: 24px;
            font-weight: 700;
            color: #1d1d1f;
            margin-bottom: 16px;
            text-align: center;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section {
            margin-bottom: 16px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 12px;
        }

        .slider-container {
            margin-bottom: 12px;
        }

        .slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
            color: #86868b;
        }

        .slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #e5e5e7;
            outline: none;
            -webkit-appearance: none;
            position: relative;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }

        .button {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 8px;
            position: relative;
            overflow: hidden;
        }

        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
        }

        .button:active {
            transform: translateY(0);
        }

        .button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .button:hover::before {
            left: 100%;
        }

        .preset-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-bottom: 12px;
        }

        .preset-btn {
            padding: 8px;
            border: 2px solid #e5e5e7;
            border-radius: 8px;
            background: white;
            color: #1d1d1f;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .preset-btn:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .preset-btn.active {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        #canvas {
            width: 100%;
            height: 100%;
            cursor: grab;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        }

        #canvas:active {
            cursor: grabbing;
        }

        .angle-info {
            background: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 1.4;
        }

        .tessellation-status {
            padding: 12px;
            border-radius: 12px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            font-size: 13px;
        }

        .tessellation-status.success {
            background: rgba(52, 199, 89, 0.1);
            color: #34c759;
            border: 2px solid rgba(52, 199, 89, 0.3);
        }

        .tessellation-status.failure {
            background: rgba(255, 59, 48, 0.1);
            color: #ff3b30;
            border: 2px solid rgba(255, 59, 48, 0.3);
        }

        .tessellation-status.neutral {
            background: rgba(142, 142, 147, 0.1);
            color: #8e8e93;
            border: 2px solid rgba(142, 142, 147, 0.3);
        }

        .instructions {
            color: #86868b;
            line-height: 1.5;
            font-size: 12px;
        }

        .instructions h4 {
            color: #1d1d1f;
            margin-bottom: 6px;
            margin-top: 12px;
            font-size: 13px;
        }

        .instructions h4:first-child {
            margin-top: 0;
        }

        .copyright {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            text-align: center;
            user-select: none;
            pointer-events: none;
            background: rgba(0, 0, 0, 0.3);
            padding: 8px 16px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }

        .polygon {
            stroke: #1d1d1f;
            stroke-width: 2;
            cursor: move;
            transition: all 0.2s ease;
        }

        .polygon:hover {
            stroke-width: 3;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
        }

        .polygon.selected {
            stroke: #667eea;
            stroke-width: 3;
            filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4));
        }

        .angle-arc {
            fill: none;
            stroke: #ff3b30;
            stroke-width: 1.5;
            opacity: 0.8;
        }

        .angle-text {
            font-size: 12px;
            fill: #ff3b30;
            font-weight: 600;
            text-anchor: middle;
        }

        .rotation-handle {
            fill: #667eea;
            stroke: white;
            stroke-width: 2;
            cursor: grab;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .polygon.selected + .rotation-handle {
            opacity: 1;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .tessellation-success {
            animation: pulse 0.6s ease-in-out;
        }

        .prediction-area {
            background: rgba(255, 255, 255, 0.9);
            padding: 12px;
            border-radius: 8px;
        }

        .prediction-item {
            margin-bottom: 12px;
        }

        .prediction-item label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 6px;
        }

        .radio-group {
            display: flex;
            gap: 12px;
            margin-bottom: 8px;
        }

        .radio-label {
            display: flex;
            align-items: center;
            font-size: 11px;
            color: #86868b;
            cursor: pointer;
            font-weight: normal;
        }

        .radio-label input[type="radio"] {
            margin-right: 4px;
            accent-color: #667eea;
        }

        .number-input {
            width: 100%;
            padding: 8px;
            border: 2px solid #e5e5e7;
            border-radius: 6px;
            font-size: 12px;
            background: white;
            transition: border-color 0.2s ease;
        }

        .number-input:focus {
            outline: none;
            border-color: #667eea;
        }

        .verify-btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #34c759, #30d158);
            color: white;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
        }

        .verify-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
        }

        .verify-btn:disabled {
            background: #8e8e93;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .answer-area {
            margin-top: 12px;
            padding: 10px;
            background: rgba(52, 199, 89, 0.1);
            border-radius: 6px;
            border: 1px solid rgba(52, 199, 89, 0.3);
        }

        .answer-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 12px;
        }

        .answer-label {
            color: #86868b;
            font-weight: 500;
        }

        .answer-value {
            color: #1d1d1f;
            font-weight: 600;
        }

        .explanation {
            margin-top: 8px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 4px;
            font-size: 11px;
            line-height: 1.4;
            color: #1d1d1f;
        }

        .correct-prediction {
            background: rgba(52, 199, 89, 0.1);
            border-color: rgba(52, 199, 89, 0.3);
        }

        .incorrect-prediction {
            background: rgba(255, 59, 48, 0.1);
            border-color: rgba(255, 59, 48, 0.3);
        }

        @media (max-width: 1024px) {
            body {
                flex-direction: column;
            }
            
            .control-panel, .info-panel {
                width: 100%;
                height: auto;
            }
            
            .main-area {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <div class="title">多边形密铺探究</div>
        
        <div class="section">
            <div class="section-title">多边形设置</div>
            <div class="slider-container">
                <div class="slider-label">
                    <span>边数</span>
                    <span id="sidesValue">6</span>
                </div>
                <input type="range" id="sidesSlider" class="slider" min="3" max="12" value="6">
            </div>
            
            <div class="preset-buttons">
                <button class="preset-btn" data-sides="3">三角形</button>
                <button class="preset-btn" data-sides="4">四边形</button>
                <button class="preset-btn active" data-sides="6">六边形</button>
                <button class="preset-btn" data-sides="8">八边形</button>
            </div>
        </div>

        <div class="section">
            <div class="section-title">操作</div>
            <button class="button" onclick="addPolygon()">添加多边形</button>
            <button class="button" onclick="clearCanvas()">清空画布</button>
            <button class="button" onclick="autoArrange()">自动排列</button>
        </div>

        <div class="section">
            <div class="section-title">说明</div>
            <div class="instructions">
                <h4>操作方法：</h4>
                <p>• 调节边数滑块或点击预设按钮</p>
                <p>• 点击"添加多边形"在画布中央创建</p>
                <p>• 拖拽多边形移动位置</p>
                <p>• 选中多边形后拖拽蓝色圆点旋转</p>
                
                <h4>密铺原理：</h4>
                <p>• 正多边形能密铺的条件：顶点周围的角度和必须等于360°</p>
                <p>• 正三角形：内角60°，6个围成360°</p>
                <p>• 正四边形：内角90°，4个围成360°</p>
                <p>• 正六边形：内角120°，3个围成360°</p>
            </div>
        </div>
    </div>

    <div class="main-area">
        <div class="canvas-container">
            <svg id="canvas" viewBox="0 0 800 600">
                <defs>
                    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
                    </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#grid)"/>
            </svg>
        </div>
    </div>

    <div class="info-panel">
        <div class="section">
            <div class="section-title">探究预测</div>
            <div class="prediction-area">
                <div class="prediction-item">
                    <label>你认为这个多边形能密铺吗？</label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="canTessellate" value="yes">
                            <span>能够密铺</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="canTessellate" value="no">
                            <span>无法密铺</span>
                        </label>
                    </div>
                </div>
                
                <div class="prediction-item">
                    <label>如果能密铺，需要几个围成一圈？</label>
                    <input type="number" id="predictCount" class="number-input" min="1" max="20" placeholder="输入个数">
                </div>
                
                <button class="verify-btn" onclick="verifyPrediction()">验证预测</button>
            </div>
        </div>

        <div class="section">
            <div class="section-title">当前多边形信息</div>
            <div id="polygonInfo" class="angle-info">
                边数：<span id="currentSides">6</span><br>
                内角：<span id="currentAngle">120</span>°<br>
                <div id="answerArea" class="answer-area" style="display: none;">
                    <div class="answer-line">
                        <span class="answer-label">实际结果：</span>
                        <span id="actualResult" class="answer-value"></span>
                    </div>
                    <div class="answer-line">
                        <span class="answer-label">所需个数：</span>
                        <span id="actualCount" class="answer-value"></span>
                    </div>
                    <div class="explanation" id="explanation"></div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">密铺状态</div>
            <div id="tessellationStatus" class="tessellation-status neutral">
                请添加多边形开始探究
            </div>
        </div>

        <div class="section">
            <div class="section-title">理论知识</div>
            <div class="instructions">
                <h4>正多边形内角公式：</h4>
                <p>内角 = (n-2) × 180° ÷ n</p>
                <p>其中 n 为边数</p>
                
                <h4>密铺条件：</h4>
                <p>360° ÷ 内角 = 整数</p>
            </div>
        </div>
    </div>

    <div class="copyright">本页面由公众号先见信息开发提供，禁止商用</div>

    <script>
        // 防止页面被篡改
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });

        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault();
            }
        });

        // 全局变量
        const canvas = document.getElementById('canvas');
        const sidesSlider = document.getElementById('sidesSlider');
        const sidesValue = document.getElementById('sidesValue');
        let polygons = [];
        let selectedPolygon = null;
        let isDragging = false;
        let isRotating = false;
        let dragOffset = {x: 0, y: 0};
        let polygonIdCounter = 0;
        let hasVerifiedPrediction = false;

        // 多边形类
        class Polygon {
            constructor(sides, centerX, centerY, perimeter = 500) {
                this.id = polygonIdCounter++;
                this.sides = sides;
                this.centerX = centerX;
                this.centerY = centerY;
				this.perimeter = perimeter; // 目标周长
                this.radius = this.calculateRadius(); // 动态计算外接圆半径
                this.rotation = 0;
                this.element = null;
                this.rotationHandle = null;
                this.angleElements = [];
                this.createSVGElement();
            }

            createSVGElement() {
                // 创建多边形路径
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", this.getPathData());
                path.setAttribute("class", "polygon");
                path.setAttribute("fill", this.getRandomColor());
                path.setAttribute("fill-opacity", "0.7");
                path.setAttribute("data-id", this.id);
                
                // 创建旋转手柄
                const handle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                handle.setAttribute("cx", this.centerX + this.radius + 30);
                handle.setAttribute("cy", this.centerY);
                handle.setAttribute("r", "10");
                handle.setAttribute("class", "rotation-handle");
                handle.setAttribute("data-id", this.id);

                this.element = path;
                this.rotationHandle = handle;
                
                canvas.appendChild(path);
                canvas.appendChild(handle);
                
                this.updateAngleLabels();
            }
			
			// 根据周长计算外接圆半径
			calculateRadius() {
				const sideLength = this.perimeter / this.sides;
				return sideLength / (2 * Math.sin(Math.PI / this.sides));
			}

            getPathData() {
                const points = [];
                for (let i = 0; i < this.sides; i++) {
                    const angle = (i * 2 * Math.PI / this.sides) + (this.rotation * Math.PI / 180);
                    const x = this.centerX + this.radius * Math.cos(angle);
                    const y = this.centerY + this.radius * Math.sin(angle);
                    points.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`);
                }
                points.push('Z');
                return points.join(' ');
            }

            getRandomColor() {
                const colors = [
                    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', 
                    '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }

            updateAngleLabels() {
                // 清除旧的角度标签
                this.angleElements.forEach(el => el.remove());
                this.angleElements = [];

                const interiorAngle = (this.sides - 2) * 180 / this.sides;
                
                for (let i = 0; i < this.sides; i++) {
                    const angle = (i * 2 * Math.PI / this.sides) + (this.rotation * Math.PI / 180);
                    const x = this.centerX + (this.radius * 0.7) * Math.cos(angle);
                    const y = this.centerY + (this.radius * 0.7) * Math.sin(angle);
                    
                    // 创建角度弧线
                    const arc = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    const startAngle = angle - Math.PI / this.sides;
                    const endAngle = angle + Math.PI / this.sides;
                    const arcRadius = this.radius * 0.3;
                    
                    const x1 = this.centerX + arcRadius * Math.cos(startAngle);
                    const y1 = this.centerY + arcRadius * Math.sin(startAngle);
                    const x2 = this.centerX + arcRadius * Math.cos(endAngle);
                    const y2 = this.centerY + arcRadius * Math.sin(endAngle);
                    
                    const arcPath = `M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}`;
                    arc.setAttribute("d", arcPath);
                    arc.setAttribute("class", "angle-arc");
                    
                    // 创建角度文本
                    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
                    text.setAttribute("x", x);
                    text.setAttribute("y", y + 4);
                    text.setAttribute("class", "angle-text");
                    text.textContent = `${Math.round(interiorAngle)}°`;
                    
                    canvas.appendChild(arc);
                    canvas.appendChild(text);
                    
                    this.angleElements.push(arc, text);
                }
            }

            update() {
                this.element.setAttribute("d", this.getPathData());
                this.rotationHandle.setAttribute("cx", this.centerX + (this.radius + 30) * Math.cos(this.rotation * Math.PI / 180));
                this.rotationHandle.setAttribute("cy", this.centerY + (this.radius + 30) * Math.sin(this.rotation * Math.PI / 180));
                this.updateAngleLabels();
            }

            moveTo(x, y) {
                this.centerX = x;
                this.centerY = y;
                this.update();
            }

            rotate(angle) {
                this.rotation = angle;
                this.update();
            }

            select() {
                this.element.classList.add('selected');
            }

            deselect() {
                this.element.classList.remove('selected');
            }

            remove() {
                this.element.remove();
                this.rotationHandle.remove();
                this.angleElements.forEach(el => el.remove());
            }

            getInteriorAngle() {
                return (this.sides - 2) * 180 / this.sides;
            }
        
		
		}

        // 事件监听器
        sidesSlider.addEventListener('input', function() {
            const sides = parseInt(this.value);
            sidesValue.textContent = sides;
            updatePolygonInfo(sides);
            updatePresetButtons(sides);
        });

        // 预设按钮事件
        document.querySelectorAll('.preset-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const sides = parseInt(this.dataset.sides);
                sidesSlider.value = sides;
                sidesValue.textContent = sides;
                updatePolygonInfo(sides);
                updatePresetButtons(sides);
            });
        });

        // 画布事件
        canvas.addEventListener('mousedown', function(e) {
            const rect = canvas.getBoundingClientRect();
            const x = (e.clientX - rect.left) * (800 / rect.width);
            const y = (e.clientY - rect.top) * (600 / rect.height);
            
            const target = e.target;
            
            if (target.classList.contains('polygon')) {
                const polygonId = parseInt(target.dataset.id);
                selectedPolygon = polygons.find(p => p.id === polygonId);
                selectPolygon(selectedPolygon);
                
                isDragging = true;
                dragOffset.x = x - selectedPolygon.centerX;
                dragOffset.y = y - selectedPolygon.centerY;
            } else if (target.classList.contains('rotation-handle')) {
                const polygonId = parseInt(target.dataset.id);
                selectedPolygon = polygons.find(p => p.id === polygonId);
                selectPolygon(selectedPolygon);
                
                isRotating = true;
            } else {
                deselectAll();
            }
        });

        canvas.addEventListener('mousemove', function(e) {
            if (!selectedPolygon) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = (e.clientX - rect.left) * (800 / rect.width);
            const y = (e.clientY - rect.top) * (600 / rect.height);
            
            if (isDragging) {
                selectedPolygon.moveTo(x - dragOffset.x, y - dragOffset.y);
                checkTessellation();
            } else if (isRotating) {
                const dx = x - selectedPolygon.centerX;
                const dy = y - selectedPolygon.centerY;
                const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                selectedPolygon.rotate(angle);
                checkTessellation();
            }
        });

        canvas.addEventListener('mouseup', function() {
            isDragging = false;
            isRotating = false;
        });

        // 功能函数
        function addPolygon() {
            const sides = parseInt(sidesSlider.value);
            const polygon = new Polygon(sides, 400, 300);
            polygons.push(polygon);
            selectPolygon(polygon);
            checkTessellation();
        }

        function clearCanvas() {
            polygons.forEach(polygon => polygon.remove());
            polygons = [];
            selectedPolygon = null;
            if (hasVerifiedPrediction) {
                updateTessellationStatus('请添加多边形开始探究', 'neutral');
            } else {
                updateTessellationStatus('请先在右侧进行预测并验证', 'neutral');
            }
        }

        function autoArrange() {
            if (polygons.length === 0) return;
            
            const sides = polygons[0].sides;
            const interiorAngle = (sides - 2) * 180 / sides;
            const tessellationCount = 360 / interiorAngle;
            
            if (tessellationCount === Math.floor(tessellationCount)) {
                // 可以密铺，自动排列
                const centerX = 400;
                const centerY = 300;
                const radius = 120;
                
                polygons.forEach((polygon, index) => {
                    if (index === 0) {
                        polygon.moveTo(centerX, centerY);
                        polygon.rotate(0);
                    } else {
                        const angle = (index * 2 * Math.PI / tessellationCount);
                        const x = centerX + radius * 2 * Math.cos(angle);
                        const y = centerY + radius * 2 * Math.sin(angle);
                        polygon.moveTo(x, y);
                        polygon.rotate(angle * 180 / Math.PI);
                    }
                });
                
                // 确保有足够的多边形
                while (polygons.length < tessellationCount) {
                    addPolygon();
                }
                
                checkTessellation();
            }
        }

        function selectPolygon(polygon) {
            deselectAll();
            selectedPolygon = polygon;
            polygon.select();
        }

        function deselectAll() {
            polygons.forEach(polygon => polygon.deselect());
            selectedPolygon = null;
        }

        function updatePolygonInfo(sides) {
            const interiorAngle = (sides - 2) * 180 / sides;
            
            document.getElementById('currentSides').textContent = sides;
            document.getElementById('currentAngle').textContent = Math.round(interiorAngle * 10) / 10;
            
            // 隐藏答案区域，重置预测
            document.getElementById('answerArea').style.display = 'none';
            resetPrediction();
            hasVerifiedPrediction = false;
        }

        function updatePresetButtons(sides) {
            document.querySelectorAll('.preset-btn').forEach(btn => {
                btn.classList.toggle('active', parseInt(btn.dataset.sides) === sides);
            });
        }

        function checkTessellation() {
            if (polygons.length === 0) {
                if (hasVerifiedPrediction) {
                    updateTessellationStatus('请添加多边形开始探究', 'neutral');
                } else {
                    updateTessellationStatus('请先在右侧进行预测并验证', 'neutral');
                }
                return;
            }
            
            const sides = polygons[0].sides;
            const interiorAngle = (sides - 2) * 180 / sides;
            const tessellationCount = 360 / interiorAngle;
            
            // 检查用户是否通过操作发现了答案
            const userPrediction = document.querySelector('input[name="canTessellate"]:checked');
            const userCount = parseInt(document.getElementById('predictCount').value);
            const canTessellate = tessellationCount === Math.floor(tessellationCount);
            
            // 如果用户预测错误但通过操作发现了正确答案，显示完整解释
            if (userPrediction && !hasVerifiedPrediction) {
                const userThinksCan = userPrediction.value === 'yes';
                let discoveredAnswer = false;
                
                if (canTessellate && polygons.length >= tessellationCount) {
                    // 用户通过操作发现可以密铺
                    discoveredAnswer = true;
                    showDiscoveredAnswer(sides, interiorAngle, tessellationCount, true);
                } else if (!canTessellate && polygons.length >= 3) {
                    // 用户尝试了多个多边形但无法密铺
                    discoveredAnswer = true;
                    showDiscoveredAnswer(sides, interiorAngle, tessellationCount, false);
                }
                
                if (discoveredAnswer) {
                    hasVerifiedPrediction = true;
                }
            }
            
            // 如果用户还没有验证预测且没有通过操作发现答案，提示验证
            if (!hasVerifiedPrediction) {
                updateTessellationStatus('继续操作探索，或返回右侧验证预测', 'neutral');
                return;
            }
            
            // 显示密铺状态
            if (tessellationCount === Math.floor(tessellationCount)) {
                if (polygons.length >= tessellationCount) {
                    updateTessellationStatus(`✓ ${sides}边形可以密铺！需要${tessellationCount}个围成一圈`, 'success');
                    // 添加成功动画
                    polygons.forEach(polygon => {
                        polygon.element.classList.add('tessellation-success');
                        setTimeout(() => {
                            polygon.element.classList.remove('tessellation-success');
                        }, 600);
                    });
                } else {
                    updateTessellationStatus(`${sides}边形可以密铺，还需要${tessellationCount - polygons.length}个`, 'neutral');
                }
            } else {
                updateTessellationStatus(`✗ ${sides}边形无法单独密铺（内角${Math.round(interiorAngle)}°）`, 'failure');
            }
        }

        function updateTessellationStatus(message, type) {
            const statusElement = document.getElementById('tessellationStatus');
            statusElement.textContent = message;
            statusElement.className = `tessellation-status ${type}`;
        }

        // 预测验证相关函数
        function verifyPrediction() {
            const sides = parseInt(sidesSlider.value);
            const interiorAngle = (sides - 2) * 180 / sides;
            const tessellationCount = 360 / interiorAngle;
            const canTessellate = tessellationCount === Math.floor(tessellationCount);
            
            // 获取用户预测
            const userPrediction = document.querySelector('input[name="canTessellate"]:checked');
            const userCount = parseInt(document.getElementById('predictCount').value);
            
            if (!userPrediction) {
                alert('请先选择你的预测！');
                return;
            }
            
            const userThinksCan = userPrediction.value === 'yes';
            
            // 判断预测是否正确
            let isCorrect = userThinksCan === canTessellate;
            if (canTessellate && userCount && userCount !== tessellationCount) {
                isCorrect = false;
            }
            
            // 显示答案区域
            const answerArea = document.getElementById('answerArea');
            answerArea.style.display = 'block';
            
            if (isCorrect) {
                // 预测正确，显示完整答案和解释
                document.getElementById('actualResult').textContent = canTessellate ? '能够密铺' : '无法密铺';
                document.getElementById('actualCount').textContent = canTessellate ? `${tessellationCount}个` : '不适用';
                answerArea.className = 'answer-area correct-prediction';
                
                let explanation = '';
                if (canTessellate) {
                    explanation = `✓ 预测正确！${sides}边形的内角是${Math.round(interiorAngle)}°，360° ÷ ${Math.round(interiorAngle)}° = ${tessellationCount}，是整数，所以能够密铺。现在可以在画布上添加多边形验证实际效果！`;
                } else {
                    explanation = `✓ 预测正确！${sides}边形的内角是${Math.round(interiorAngle * 10) / 10}°，360° ÷ ${Math.round(interiorAngle * 10) / 10}° = ${Math.round((360 / interiorAngle) * 100) / 100}，不是整数，所以无法单独密铺。你可以在画布上尝试验证！`;
                }
                document.getElementById('explanation').textContent = explanation;
                
                // 标记已验证，允许查看密铺状态
                hasVerifiedPrediction = true;
            } else {
                // 预测错误，不显示答案，引导操作验证
                document.getElementById('actualResult').textContent = '请通过操作验证';
                document.getElementById('actualCount').textContent = '请自己探索';
                answerArea.className = 'answer-area incorrect-prediction';
                
                let explanation = '';
                if (userThinksCan !== canTessellate) {
                    explanation = `🤔 你的预测可能需要再考虑一下。请在左侧画布上添加${sides}边形，通过实际操作来验证你的想法。试着添加多个多边形，看看它们能否完美拼接！`;
                } else if (canTessellate && userCount && userCount !== tessellationCount) {
                    explanation = `🤔 密铺判断正确，但个数可能不对。请在画布上添加${sides}边形，尝试围成一圈，看看实际需要几个！`;
                }
                document.getElementById('explanation').textContent = explanation;
                
                // 不标记为已验证，需要用户通过操作发现答案
                hasVerifiedPrediction = false;
            }
            
            // 禁用验证按钮
            document.querySelector('.verify-btn').disabled = true;
        }
        
        function showDiscoveredAnswer(sides, interiorAngle, tessellationCount, canTessellate) {
            // 显示答案区域
            const answerArea = document.getElementById('answerArea');
            answerArea.style.display = 'block';
            answerArea.className = 'answer-area correct-prediction';
            
            // 设置发现的答案
            document.getElementById('actualResult').textContent = canTessellate ? '能够密铺' : '无法密铺';
            document.getElementById('actualCount').textContent = canTessellate ? `${tessellationCount}个` : '不适用';
            
            // 生成发现答案的解释
            let explanation = '';
            if (canTessellate) {
                explanation = `🎉 太棒了！你通过实际操作发现了答案！${sides}边形的内角是${Math.round(interiorAngle)}°，360° ÷ ${Math.round(interiorAngle)}° = ${tessellationCount}，是整数，所以能够密铺。你已经成功验证了这个结论！`;
            } else {
                explanation = `🎉 很好的探索！你通过实际尝试发现${sides}边形无法密铺。这是因为${sides}边形的内角是${Math.round(interiorAngle * 10) / 10}°，360° ÷ ${Math.round(interiorAngle * 10) / 10}° = ${Math.round((360 / interiorAngle) * 100) / 100}，不是整数，所以无法完美拼接。`;
            }
            
            document.getElementById('explanation').textContent = explanation;
        }

        function resetPrediction() {
            // 重置单选按钮
            document.querySelectorAll('input[name="canTessellate"]').forEach(radio => {
                radio.checked = false;
            });
            
            // 重置数字输入
            document.getElementById('predictCount').value = '';
            
            // 启用验证按钮，重置验证状态
            document.querySelector('.verify-btn').disabled = false;
            hasVerifiedPrediction = false;
        }

        // 初始化
        updatePolygonInfo(6);
        updateTessellationStatus('请先在右侧进行预测并验证', 'neutral');
    </script>
</body>
</html>
